<template>
  <div class="list-content">
    <div class="list-header clearfix">
      <div class="list-header-tit fl">我的订阅</div>
       <div @click="backHome" class="list-close fr" style="font-size: 16px;background:#ffffff;">
            返回首页：
        <img src="../../assets/image/backhome.png" style="width:24px;height:24px;">
        
        <!--
        <i @click="backHome" class="list-close el-icon-circle-close"></i>
        -->
      </div>
    </div>
    <div class="list-table">
      <div class="home-table">
        <table class="app-table">
          <thead>
            <th>栏目名称</th>
            <th>日期</th>
            <th>操作</th>
          </thead>
          <tbody v-if="list.length">
            <tr v-for="item in list" :key="item.manuscriptId">
              <td class="ellipsis" style=" cursor: pointer;width:60%"  @click="openNewPage_lookAndCollect(item)" :title="item.channelName">{{ item.channelName| filterWords  }}</td>
              <td >{{ item.createTime | formatDayTime }}</td>
              <td>
                <div class="can-btn" @click="cancleMysubscibe(item)">取消订阅</div>
              </td>
            </tr>
          </tbody>
          <tbody v-if="!list.length">
            <tr>
              <td>暂无数据</td>
              <td>暂无数据</td>
              <td>暂无数据</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="page-wrap">
      <el-pagination
        background
        :current-page="pageIndex"
        :page-size="pageSize"
        @current-change="pageChange"
        layout="prev, pager, next,jumper"
        :total="Number(total)">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {  getUserInfo,getSubscibeData,cancleMysubscibeData  } from '@/api'
export default {
  data() {
    return {
      list:[],
      pageIndex:1,
      pageSize:10,
      total:0,
    };
  },
  computed:{
    getUser(){
      return this.$store.state.user;
    }
  },
  mounted(){
    this.getData();
  },
  methods:{
    backHome(){
      this.$router.push({ name:'home' });
    },
    pageChange(num){
      this.pageIndex = num;
      this.getList();
    },
    getData(){ // 保证有userid
      if(this.getUser.id){
        this.getList();
      }else{
        let url = '/sys/sysMember/getMember';
        getUserInfo(url).then(res=>{
          if(res.data.code == 200){
            this.$store.commit('setUserinfo',{
              id:res.data.data.id,
              name:res.data.data.loginName,
              mobile:res.data.data.mobile,
            })
            this.getList();
          }
        })
      }
    },
    getList(){
      let url = '/sys/sysMember/qrySubscriptionChannelByuserId';
      let params = {
        memberId: this.getUser.id,
        pageNum :this.pageIndex,
        pageSize :this.pageSize,
      }
      getSubscibeData(url,params).then(res=>{
        if(res.data.Status == 'true'){
          this.list = res.data.data || [];
          this.total = res.data.pager.totalCount || 0;
        }else{
          this.list = [];
          this.total = 0;
        }
      })
    },
    cancleMysubscibe(item){
      // console.log(item,'item')
      let url = '/sys/sysMember/cancelSubscriptionChannel';
      let params = {
        memberId: this.getUser.id,
        channelId :item.channelId
      }
      cancleMysubscibeData(url,params).then(res=>{
        // console.log(res,'res111')
        if(res.data.Status == 'true'){
          this.getList()
          this.$message({
            type: "success",
            duration: 3000,
            message: "取消成功"
          });
        }else{
          this.$message({
            type: "error",
            duration: 3000,
            message: "操作失败，请重试"
          });
        }
      })
    },


    openNewPage_lookAndCollect(item){
      var a = document.createElement('a');
      a.setAttribute('href', item.url);
      a.setAttribute('target', '_blank');
      a.setAttribute('id', 'lookandcollect');
      if(document.getElementById('lookandcollect')) {
          document.body.removeChild(document.getElementById('lookandcollect'));
      }
      document.body.appendChild(a);
      a.click()
    },
  }
};
</script>
